import React, { Component } from 'react'
import { Button, message, Form,Input } from 'antd'

class Phone extends Component{
  bindPhone() {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.bindPhone({
          time: this.props.sms.get('time'),
          md5: this.props.sms.get('data'),
          ...values
        })
      }
    });
  }

  componentWillMount() {
    setTimeout(() => {
      let cH = document.getElementById('p_content').clientHeight
      let bH = document.body.clientHeight - 180
      let t = document.getElementById('footer')
      if(cH >= bH || bH<=800) {
        t.style.position= 'relative'
      }
    }, 300);
  }

  sendSms() {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.sendSms({
          mode: 2,
          phone: values.phone
        })
      }
    });
  }

  renderContent() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 3 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 6 },
        sm: { span: 6 },
      },
    };
    
    const { getFieldDecorator } = this.props.form; 
    return (
      <div>
        <Form {...formItemLayout}>
          <Form.Item label="手机号">
            {
              getFieldDecorator('phone', {
                rules: [
                  {
                    required: true, message: "手机号不能为空！"
                  },
                  {
                    len: 11, message: "手机格式不正确"
                  }
                ]

              })(<Input placeholder="请输入手机号"/>)
            }
          </Form.Item>
          <Form.Item label="验证码">
            <div style={{display: "flex"}}> 
              {
                 getFieldDecorator('verifyCode', {

                })(<Input placeholder="请输入验证码" />)
              }
              &nbsp;&nbsp;
            <Button type="primary"  onClick={this.sendSms.bind(this, 2)} disabled={this.props.smsCount === 0 ? false: true}>{this.props.smsCount===0 ? '获取验证码': (this.props.smsCount)}</Button>
            </div>
          </Form.Item>
        </Form>
        <Button style={{marginBottom: "10px", marginLeft: '50px'}} type="primary" onClick={this.bindPhone.bind(this)}  size="large">确定</Button>
      </div>
    )

  }
  render() {
    return (
    <div>
      {this.renderContent()}
    </div>
    )
  }
}

Phone = Form.create({ name: 'phone' })(Phone);

export default Phone


